<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">

<li th:if="${#lists.isEmpty(dataList)}" id="no-data-li">
    <section class="no-data__wrap">
        <em>&nbsp;</em>
        <p>亲，小编正在整理中</p>
    </section>
</li>
<div class="swiper-container swiper-container-tuanCourse swiper-container-horizontal">
   <div class="swiper-wrapper">
      <div class="swiper-slide" th:if="!${#lists.isEmpty(dataList)}" th:each="course : ${dataList}">
          <div class="list-block media-list wm-course-list__wrap">
        <ul class="list-container wm-course-list">
            <li class="mb5">
                <a th:href="@{/mobile/course/smallClassInfo?courseId={courseId}(courseId=${course['dataTypeMap']['id']})}">
                    <div class="pl75 pr75">
                        <h1 class="article-title ellipsis"><b class="fs8" th:text="${course['dataTypeMap']['courseName']}">——</b></h1>
                        <section class="mt5 fs4 c-red">
                            <span class="icon icon-clock vam"></span>
                            <span class="vam" th:text="${#strings.substring(course['dataTypeMap']['openTime'],0,16)}+' — '+${#strings.substring(course['dataTypeMap']['endTime'],0,16)}"></span>
                        </section>
                        <section>
                            <section class="row">
                                <section class="col-60">
                                    <section class="clearfix">
                                        <th:block th:if="${!#lists.isEmpty(course['dataTypeMap']['teacherList'])}" >
                                            <div class="pull-left" th:each="teacher,index:${course['dataTypeMap']['teacherList']}" th:if="${index['index']}==0">
                                                <div class="teacher-pic__wrap" style="width: 1.8rem;height: 1.8rem;">
                                                    <img class="wm-img" th:alt="${teacher['teacherName']}"   th:attr="data-src=${teacher['imageMap']['mobileUrlMap']['large']}" th:attrappend="src=@{{path}/front/mobile/v3/img/default/default-face.jpg(path=${staticPath})}"  >
                                                </div>
                                            </div>
                                        </th:block>
                                        <th:block th:if="${!#lists.isEmpty(course['assistantList'])}">
                                            <div class="pull-left"  th:each="teacher,index:${course['assistantList']}" th:if="${index['index']}==0">
                                                <div class="teacher-pic__wrap">
                                                    <img class="wm-img" th:alt="${teacher['teacherName']}"   th:attr="data-src=${teacher['imageMap']['mobileUrlMap']['large']}"   src="https://fimage.268xue.com/upload/0/yzl/common/2019032003/97711618680b4b9f283c000095b69a2a_jpg/mobile/large.jpg"  >
                                                </div>
                                            </div>
                                        </th:block>
                                    </section>
                                </section>
                                <section class="col-40 mt5">
                                    <div class="text-right pt5">
                                        <aside class="c-red" th:if="${course['dataTypeMap']['buyNum']}-${course['dataTypeMap']['courseProfile']['buyCount']}>0">
                                            <span class="vam">剩</span>
                                            <span class="vam" th:text="${course['dataTypeMap']['buyNum']}-${course['dataTypeMap']['courseProfile']['buyCount']}"></span>
                                            <span class="vam">个名额</span>
                                        </aside>
                                        <aside class="c-888" th:if="${course['dataTypeMap']['buyNum']}-${course['dataTypeMap']['courseProfile']['buyCount']}<=0">名额已满</aside>
                                    </div>
                                </section>
                            </section>
                        </section>
                    </div>
                    <div class="card-footer mt5">
                        <aside>
                            <span class="c-333">共<span th:if="${course['dataTypeMap']['nodeNum']}!=null" th:text="${course['dataTypeMap']['nodeNum']}"></span>讲</span>
                            <span class="c-red ml5" th:if="${course['dataTypeMap']['limitDay']}>0 and ${course['dataTypeMap']['limitDate']}!=null" th:text="'距离停售还有'+${course['dataTypeMap']['limitDay']}+'天'"></span>
                            <span class="c-red ml5" th:if="${course['dataTypeMap']['limitDay']}<=0 and ${course['dataTypeMap']['limitDate']}!=null">此课已停售，请关注其它</span>
                        </aside>
                        <aside th:if="${course['dataTypeMap']['realPrice']} > 0" >
                        <span class="c-red fs8 vam">
                         <small class="fs4">￥</small><strong th:text="${course['dataTypeMap']['realPrice']}"></strong>
                           </span>
                            <s class="fs4 c-bbb vam"  th:text="${course['dataTypeMap']['orPrice']}"></s>
                        </aside>
                        <aside th:if="${course['dataTypeMap']['realPrice']} <= 0">
                         <span class="c-green fs8 vam">
                                免费
                          </span>
                        </aside>
                    </div>
                </a>
            </li>
        </ul>
    </div>
      </div>
   </div>
</div>
</html>